<template>
  <div class="Banner">
    <div class="Banner-title">
      <span v-if="columnName">{{ columnName }}</span>
      <span v-else>轮播图</span>
    </div>
    <div class="Banner-content" v-if="columnContent.length != 0">
      <img class="bannerImg" @click="updateColumnClick" src="../../../assets/banner-1.jpg" />
    </div>
    <div class="Banner-content-null" @click="updateColumnClick" v-else>
      <img src="../../../assets/qxbNull.png" />
      <p>
        <span>+</span>
        <span v-if="columnName">{{ columnName }}</span>
        <span v-else>轮播图</span>
      </p>
    </div>
  </div>
</template>

<script type="ts">
import {computed, defineComponent,ref} from "vue";
let flag=ref(false)
export default defineComponent({
  props: ['attrData', 'updateColumn'],
  setup(props) {
    console.log("attrData", props.attrData)
    // const upperCaseString = computed(() => {
    //   return props.value.toUpperCase();
    // });
    // return {
    //   upperCaseString
    // };

    const columnName = computed(() => {
      return props.attrData.columnName;
    })

    const columnContent = computed(() => {
      return  [1,2,3];
    })
    const updateColumnClick = () => {
      console.log("updateColumnClick")
      props.updateColumn({})
    }

    return {
      columnName,
      columnContent,
      updateColumnClick,
      flag
    }
  }
});
</script>

<style lang="scss" scoped>
.Banner {
  .Banner-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
  }

  .Banner-content {
    img {
      width: 100%;
      height: 180px;
    }
    .marker{
      width: 100%;
      height: 30px;
      background: rgba($color: #000000, $alpha: 0.5);
      color: white;
    }
  }

  .Banner-content-null {
    width: 100%;
    height: 144px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 55px;
    }
    p {
      margin: 0;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 400;
      text-align: center;
      font-size: 12px;
    }
  }
}
</style>
